<template>
  <view class="page-pwd">
    <view class="header">
      <view class="title">{{ $t('mine.充值') }}</view>
      <uni-icons type="left" color="#ffffff" size="24" class="back-icon" @click="handleBack"></uni-icons>
    </view>
    <uni-forms ref="form" :value="form" labelWidth="80px" class="form">
      <uni-forms-item name="money" :label="$t('mine.充值金额')">
        <uni-easyinput type="txt" v-model="form.money" :placeholder="$t('mine.请输入充值金额')" />
      </uni-forms-item>
      <button type="primary" @click="submit" class="btn">{{ $t('mine.提交') }}</button>
    </uni-forms>
  </view>
</template>

<script>
  import { rechargeConfig, recharge } from '@/api/wallet.js'

  export default {
    data() {
      return {
        form: {
          money: ''
        },
        configId: '',
        rules: {
          money: {
            rules: [
              {
                required: true,
                errorMessage: this.$t('mine.请输入充值金额')
              }
            ]
          }
        }
      }
    },
    onReady() {
      this.$refs.form.setRules(this.rules)
    },

    methods: {
      // 返回
      handleBack() {
        // this.$tab.navigateBack()
        this.$tab.navigateTo('/pages/mine/wallet/index')
      },
      //提交
      submit() {
        this.$refs.form.validate().then((res) => {
          let par = {
            money: this.form.money.trim(),
            config_id: this.configId
          }
          this.$modal.loading('loading', 'loading')
          recharge(par)
            .then((response) => {
              this.$modal.closeLoading()
              this.$modal.msgSuccess(response.message)
              setTimeout(() => {
                this.handleBack()
              }, 500)
            })
            .catch((error) => {
              this.$modal.closeLoading()
            })
        })
      },
      //获取配置
      getConfig() {
        rechargeConfig({ bank_type: 1 }).then((res) => {
          this.configId = res.result.recharge.id
        })
      }
    },
    created() {
      this.getConfig()
    }
  }
</script>

<style lang="scss" scoped>
  .page-pwd {
    position: relative;
    .header {
      background-color: #31b2b5;
      text-align: center;
      height: 44px;
      line-height: 44px;
      position: fixed;
      top: 0;
      width: 100vw;
      color: #fff;

      font-size: 26rpx;
      z-index: 9;
      .back-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        font-weight: normal;
      }
    }
    .form {
      margin: 200rpx 50rpx 0;
    }
    .btn {
      background: #31b3b5;
      width: 70vw;
      height: 40px;
      border-radius: 20px;
      font-size: 16px;
      color: #fff;
      line-height: 40px;
      text-align: center;
      margin: 100rpx auto 0;
    }
  }
</style>
